<template>
  <div>
    <!-- 欢迎界面 -->
    <div v-show="show == 0">欢迎来到红浪漫</div>

    <!-- 正在加载界面 -->
    <div v-show="show == 1">正在加载...</div>

    <!-- 正常显示用户信息 -->
    <div class="row" v-show="show == 2">
      <div class="card" v-for="(card, index) in items" :key="card.id">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img
            :src="card.avatar_url"
            style="width: 100px"
          />
        </a>
        <p class="card-text">{{ card.login }}</p>
      </div>
    </div>

    <!-- 请求失败界面 -->
    <div v-show="show == 3">404 NOT FOUND</div>
  </div>
</template>

<script>
import requests from "@/api/requests";
export default {
  data() {
    return {
      //接受服务器返回用户信息的数据
      items: [],
      show: 0,
    };
  },
  mounted() {
    this.$bus.$on("sendKeywords", async (params) => {
      //发请求之前:正在加载...
      this.show = 1;

      // console.log(params)

      //   第一种写法
      //   axios.get(`/api/search/users?q=${params}`).then((res) => {
      //     console.log(res);
      //   });

      // 第二种写法

      try {
        let result = await requests.get(`/api/search/users?q=${params}`);
        console.log(result);

        //接受服务器返回的数据，在控制台打开看一下!!!!
        this.items = result.items;
        this.show = 2;
      } catch (error) {
        this.show = 3;
      }
    });
  },
};
</script>

<style>
</style>